<template>
  <div class="card">
    <div>
      <a-input
        :allowClear="true"
        v-model="form.search.user_realname"
        class="inputStyle"
        placeholder="请输入用户姓名"
      ></a-input>
      <a-input
        :allowClear="true"
        v-model="form.search.user_phone"
        class="inputStyle"
        placeholder="请输入用户手机号"
      ></a-input>
      <a-select :allowClear="true" v-model="form.search.level_id" class="inputStyle" placeholder="请选择级别">
        <a-select-option v-for="item in levelType" :key="item.id" :value="item.id">
          {{ item.name }}
        </a-select-option>
      </a-select>
      <a-select :allowClear="true" v-model="form.search.is_activation" class="inputStyle" placeholder="请选择是否激活">
        <a-select-option
          v-for="item in [
            { id: '1', name: '已使用' },
            { id: '0', name: '未使用' }
          ]"
          :key="item.id"
          :value="item.id"
        >
          {{ item.name }}
        </a-select-option>
      </a-select>
      <a-button style="margin-right: 10px" type="primary" @click="query">查询</a-button>
      <a-button style="margin-right: 10px" @click="reset">重置</a-button>
      <a-button type="primary" @click="add()">新增</a-button>
    </div>
    <a-table
      bordered
      :rowKey="(record, index) => index"
      :pagination="{
        pageSize: form.page_size,
        pageSizeOptions: ['20', '30', '40', '50'],
        size: 'small',
        showSizeChanger: true,
        showQuickJumper: true,
        total: total,
        current: form.page,
        showTotal: total => `共 ${total} 条`
      }"
      @change="paginChange"
      style="margin-top: 10px; border: 1px solid #e8e8e8"
      show-size-changer
      show-quick-jumper
      :loading="loading"
      :data-source="tableData"
      :columns="columns"
    >
      <div slot="operate" slot-scope="text, record">
        <a-button @click="del(record.id)" type="danger">删除</a-button>
      </div>
    </a-table>
    <a-modal v-model="isShowAdd" title="新增激活码" @ok="handleOk" @cancel="onCancel">
      <a-form-model ref="formRef" :model="formData" :rules="formRule" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="手机号" prop="phone">
          <a-input v-model="formData.phone" placeholder="请输入手机号"></a-input>
        </a-form-model-item>
        <a-form-model-item label="兑换卷等级" prop="level_id">
          <a-select v-model="formData.level_id" placeholder="请选择显示类型">
            <a-select-option v-for="item in levelType" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="新增数量" prop="count">
          <a-input-number style="width: 100%" placeholder="请输入新增数量" id="inputNumber" v-model="formData.count" />
        </a-form-model-item>
        <a-form-model-item label="到期时间">
          <a-date-picker v-model="formData.expiry_time" style="width: 100%" @change="onChange" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { getLevelAPI } from '@/api/follow.js'
import { getActiveListAPI, delActivaListAPI, addActivaListAPI } from '@/api/product.js'
export default {
  name: 'activationCodeManagement',
  data() {
    return {
      isShowAdd: false,
      loading: false,
      total: 0,
      levelType: [],
      form: {
        brand_id: process.env.VUE_APP_BRAND_ID,
        page: 1,
        page_size: 50,
        search: {
          is_activation: undefined,
          level_id: undefined,
          user_phone: '',
          user_realname: ''
        }
      },
      columns: [
        {
          title: '#',
          dataIndex: 'id',
          align: 'center'
        },
        {
          title: '用户姓名',
          dataIndex: 'user_realname',
          align: 'center'
        },
        {
          title: '用户手机号',
          dataIndex: 'user_phone',
          align: 'center'
        },
        {
          title: '使用用户姓名',
          dataIndex: 'use_user_realname',
          align: 'center'
        },
        {
          title: '使用用户手机号',
          dataIndex: 'use_user_phone',
          align: 'center'
        },
        {
          title: '级别',
          dataIndex: 'level_name',
          align: 'center'
        },
        {
          title: '是否激活',
          dataIndex: 'is_activation',
          align: 'center'
        },
        {
          title: '过期时间',
          dataIndex: 'expiry_time',
          align: 'center'
        },
        {
          title: '操作',
          align: 'center',
          scopedSlots: { customRender: 'operate' }
        }
      ],
      tableData: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      formData: {
        brand_id: process.env.VUE_APP_BRAND_ID,
        count: '',
        expiry_time: '',
        level_id: undefined,
        phone: ''
      },
      formRule: {
        phone: [
          {
            required: true,
            message: '手机号不能为空'
          }
        ],
        level_id: [
          {
            required: true,
            message: '兑换卷等级不能为空'
          }
        ],
        count: [
          {
            required: true,
            message: '新增数量不能为空'
          }
        ]
      }
    }
  },
  created() {
    this.getLevel()
    this.getList()
  },
  methods: {
    query() {
      this.form.page = 1
      this.getList()
    },
    reset() {
      this.form = {
        brand_id: process.env.VUE_APP_BRAND_ID,
        page: 1,
        page_size: 50,
        search: {
          is_activation: undefined,
          level_id: undefined,
          user_phone: '',
          user_realname: ''
        }
      }
      this.getList()
    },
    onChange(value, date) {
      this.formData.expiry_time = date
    },
    paginChange(value) {
      console.log(value)
      this.form.page = value.current
      this.form.page_size = value.pageSize
      this.getList()
    },
    async getLevel() {
      const result = await getLevelAPI({ brand_id: process.env.VUE_APP_BRAND_ID })
      this.levelType = result.data
    },
    async getList() {
      try {
        this.loading = true
        const result = await getActiveListAPI(this.form)
        this.tableData = result.data.list
        this.total = result.data.total
      } finally {
        this.loading = false
      }
    },
    async del(id) {
      this.$confirm({
        title: '确认删除吗?',
        onOk: async () => {
          try {
            await delActivaListAPI({ brand_id: process.env.VUE_APP_BRAND_ID, ids: id })
            this.$message.success('操作成功')
            this.getList()
          } catch (error) {
            this.$message.error(error.data.msg)
          }
        },
        onCancel() {
          return
        },
        class: 'test'
      })
    },
    add() {
      this.isShowAdd = true
    },
    handleOk() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return
        try {
          const result = await addActivaListAPI(this.formData)
          this.$message.success(result.msg)
          this.isShowAdd = false
          this.getList()
          this.$refs.formRef.resetFields()
          this.formData.expiry_time = ''
        } catch (error) {
          this.$message.error(error.data.msg)
        }
      })
    },
    onCancel() {
      this.isShowAdd = false
      this.$refs.formRef.resetFields()
      this.formData.expiry_time = ''
    }
  }
}
</script>

<style lang="less" scoped>
.inputStyle {
  margin-right: 10px;
  width: 200px;
}
/deep/ .ant-form-item {
  margin: 0;
}
</style>
